<template>
  <div class="appeal-handle">
    <el-card>
      <div slot="header" class="clearfix">
        <span>申诉处理 - {{ appeal.studentName }}</span>
      </div>

      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="申诉内容">
          <el-input
            v-model="appeal.appealContent"
            type="textarea"
            :rows="3"
            readonly
          ></el-input>
        </el-form-item>

        <el-form-item label="原题得分">
          <el-input-number
            v-model="form.originalScore"
            :precision="1"
            :step="0.5"
            :min="0"
            :max="form.maxScore"
            disabled
          ></el-input-number>
          <span class="score-tip">满分: {{ form.maxScore }}</span>
        </el-form-item>

        <el-form-item label="调整分数" prop="adjustScore">
          <el-input-number
            v-model="form.adjustScore"
            :precision="1"
            :step="0.5"
            :min="0"
            :max="form.maxScore"
          ></el-input-number>
          <span class="score-tip">满分: {{ form.maxScore }}</span>
        </el-form-item>

        <el-form-item label="处理结果" prop="handleResult">
          <el-input
            v-model="form.handleResult"
            type="textarea"
            :rows="4"
            placeholder="请输入处理结果和理由"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm"
            :loading="loading"
          >
            提交处理
          </el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <div class="question-preview">
      <h3>题目预览</h3>
<!--      <div class="question-content" v-html="question.content"></div>-->
      <formula-renderer class="question-content" :html="question.content" />


      <div v-if="question.options && question.options.length" class="question-options">
        <h4>选项:</h4>
        <ul>
          <li
            v-for="option in question.options"
            :key="option.id"
            :class="{ 'correct-option': option.isCorrect }"
          >
<!--            {{ option.optionCode }}. <span v-html="option.content"></span>-->
            {{ option.optionCode }}. <formula-renderer :html="option.content" />

          </li>
        </ul>
      </div>

      <div v-if="question.answers && question.answers.length" class="question-answers">
        <h4>参考答案:</h4>
        <div v-for="answer in question.answers" :key="answer.id" >
          <formula-renderer :html="answer.content" />
        </div>
      </div>

      <div class="student-answer">
        <h4>学生作答:</h4>
        <div v-if="answer.selectedOptionCodes" class="selected-options">
          <p>选择选项: {{ answer.selectedOptionCodes }}</p>
        </div>
<!--        <div v-if="answer.answerContent" class="answer-content" v-html="answer.answerContent"></div>-->
        <formula-renderer v-if="answer.answerContent" class="answer-content" :html="answer.answerContent" />

        <div v-else class="empty-answer">
          <el-empty description="学生未作答" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {handleAppeal, getQuestionDetail, getTeacherAnswer, getTeacherAnswerRecord} from '@/api/exam/score'
import FormulaRenderer from "@/components/FormulaRenderer/index.vue";

export default {
  name: 'AppealHandle',
  components: {FormulaRenderer},
  props: {
    appeal: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      loading: false,
      form: {
        originalScore: 0,
        adjustScore: 0,
        maxScore: 0,
        handleResult: ''
      },
      question: {
        id: null,
        content: '',
        options: [],
        answers: []
      },
      answer: {
        selectedOptionCodes: null,
        answerContent: null
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      try {
        this.loading = true

        console.log('申诉处理数据:', this.appeal)

        // 设置表单初始值
        this.form.originalScore = this.appeal.oldScore || 0
        this.form.adjustScore = this.appeal.oldScore || 0
        this.form.handleResult = this.appeal.handleResult || ''

        // 获取题目详情
        const questionRes = await getQuestionDetail(this.appeal.questionId)
        console.log('题目详情:', questionRes)
        this.question = questionRes.data
        this.form.maxScore = questionRes.data.score || 0

        // 获取学生答案
        const answerRes = await getTeacherAnswerRecord({
          questionAnswerId: this.appeal.questionAnswerId,
        })

        if (answerRes.data) {
          console.log('answerRes',answerRes)
          this.answer = answerRes.data
        }
      } catch (error) {
        console.error('初始化申诉处理数据失败:', error)
        this.$message.error('获取申诉数据失败')
      } finally {
        this.loading = false
      }
    },

    submitForm() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          try {
            this.loading = true

            await handleAppeal({
              appealId: this.appeal.id,
              examId: this.appeal.examId,
              recordId: this.appeal.studentRecordId,
              answerId: this.appeal.questionAnswerId,
              adjustScore: this.form.adjustScore,
              handleResult: this.form.handleResult
            })

            this.$message.success('申诉处理成功')
            this.$emit('success')
          } catch (error) {
            console.error('申诉处理失败:', error)
            this.$message.error('申诉处理失败')
          } finally {
            this.loading = false
          }
        }
      })
    },

    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>

<style scoped>
.appeal-handle {
  display: flex;
  flex-direction: column;
}

.clearfix {
  font-size: 18px;
  font-weight: bold;
}

.score-tip {
  margin-left: 10px;
  color: #909399;
  font-size: 12px;
}

.question-preview {
  margin-top: 30px;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.question-content {
  margin-bottom: 20px;
}

.question-options {
  margin: 20px 0;
}

.question-options ul {
  list-style: none;
  padding: 0;
}

.question-options li {
  padding: 8px;
  margin: 5px 0;
  border-radius: 4px;
  border: 1px solid #ebeef5;
}

.correct-option {
  background-color: #f0f9eb;
  border-color: #e1f3d8 !important;
}

.question-answers {
  margin-top: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.student-answer {
  margin-top: 20px;
}

.selected-options {
  margin: 15px 0;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.answer-content {
  margin-top: 15px;
  padding: 15px;
  background-color: #ecf5ff;
  border-radius: 4px;
}

.empty-answer {
  margin-top: 20px;
}
</style>
